import React, { Component } from 'react'
import { Card, Button, List, Affix } from "antd"
import { connect } from "react-redux"
import { ArrowLeftOutlined } from '@ant-design/icons';
import { reqProdDetail, reqCategory } from "../../api/index"
import "./css/detail.less"

const { Item } = List
class Detail extends Component {
    state = {
        categoryId: '',
        categoryName: '',
        name: '',
        price: '',
        imgs: [],
        desc: '',
        detail: '',
    }

    componentDidMount() {
        const { id } = this.props.match.params    //注意：这里是商品的id，并非分类id
        //1.尝试从redux里拿商品列表  ------->   展示详情页面
        let reduxProdList = this.props.productInfo
        //如果redux里保存了详情
        if (reduxProdList.length !== 0) {
            let result = reduxProdList.find((item) => {
                return item._id === id
            })
            // 因为式jsx，所以三点运算符可以打开对象
            //【严重注意】：setState()为异步函数，这里存了状态，下面代码块无法直接取
            // 因此需要先放在组件实例身上
            this.categoryId = result.categoryId
            this.setState({ ...result })
        } else {
            this.reqDetail(id)
        }

        //2.尝试从redux里拿分类列表   ------->   展示所属分类
        let reduxCateList = this.props.categoryInfo
        if (reduxCateList.length !== 0) {
            let result = reduxCateList.find((item) => {
                // 【严重注意】:因为setState()为异步函数，所以这里不能直接取到状态里的东西，因此就从自身上取了！
                return item._id === this.categoryId
            })

            this.setState({ categoryName: result.name })
        } else {
            this.reqCateg()
        }

    }

    //请求商品详情
    reqDetail = async (id) => {
        let result = await reqProdDetail(id)
        const { status, data } = result
        // 因为式jsx，所以三点运算符可以打开对象
        if (status === 0) {
            this.categoryId = data.categoryId      //用于70行(因为setState为异步，无法直接取出状态，因此需要先放实例自身上)
            this.setState({ ...data })
        }
    }

    //请求商品分类列表
    reqCateg = async () => {
        let result = await reqCategory()
        const { status, data } = result
        if (status === 0) {
            let result = data.find((item) => {
                return item._id === this.categoryId
            })
            this.setState({ categoryName: result.name })
        }
    }

    render() {
        return (
            <Card title={
                <div className='left-top'>
                    <Button type='link' onClick={() => { this.props.history.goBack() }}>
                        <ArrowLeftOutlined style={{ fontSize: "20px" }} />
                    </Button>
                    <span >商品详情</span>
                </div>
            }
            >
                <List loading={this.state.isLoading}>
                    <Item >
                        <span className='prod-title'>商品名称:</span>
                        <span>{this.state.name}</span>
                    </Item>
                    <Item >
                        <span className='prod-title'>商品描述:</span>
                        <span>{this.state.desc}</span>
                    </Item>
                    <Item >
                        <span className='prod-title'>商品价格:</span>
                        <span>{this.state.price}</span>
                    </Item>
                    <Item >
                        <span className='prod-title'>所属分类:</span>
                        <span>{this.state.categoryName}</span>
                    </Item>
                    <Item >
                        <span className='prod-title'>商品图片:</span>
                        {
                            this.state.imgs.map((item) => {
                                // 项目已经上线了就不用加`${BASE_URL}/upload`
                                return <img src={`/upload/` + item} key={item} alt='商品图片' />
                            })
                        }
                    </Item>
                    <Item className='last-item'>
                        <span className='prod-title'>商品详情:</span>
                        {/* 用来在一个标签中插入许多个标签(安全的插入) */}
                        <span dangerouslySetInnerHTML={{ __html: this.state.detail }}></span>
                    </Item>

                </List>
            </Card>
        )
    }
}

export default connect(
    state => ({
        productInfo: state.productInfo,
        categoryInfo: state.categoryInfo
    }),
    {}
)(Detail)
